<!--
@description    绩效报表-我的绩效-图表概览
@author         秦俊强
@email          458112865@qq.com
@create         2020-02-22 11:50
-->

<template>
  <div class="chart-box">
    <div>
      <!-- 部门切换 -->
      <div class="radio-org">
        <span>部门：</span>
        <span>
          <a-radio-group buttonStyle="solid"
                         :value="checkedOrg.radio_id"
                         @change="changeOrg">
            <a-radio-button v-for="org in chartData.dataSource"
                            :value="org.radio_id">
              <span>{{ org.indexOrgName }}</span>
              <span>({{ org.scorerName }})</span>
            </a-radio-button>
          </a-radio-group>
        </span>
      </div>
    </div>

    <!-- 图表 -->
    <div class="chart-view">

      <!-- 上月和上上月分数对比 -->
      <div class="score-contrast">
        <div class="score-box" v-for="item in getRowDataSource('recentMonths')">
          <span class="title">{{ item.name }}得分：</span>
          <span class="value" v-if="item.value !=null">{{ item.value }} (分)</span>
          <span class="value" v-else> -- (分)</span>
        </div>
      </div>

      <div class="chart-bar" ref="chartBar"></div>
    </div>
  </div>
</template>



<script>
  /* 引入图表插件 */
  import echarts from 'echarts';

  /* 引入柱图配置模板 */
  import { barOptions } from './chart.bar.config.js';



  export default {
    props: {
      chartData: {
        type: Object,
        default: {}
      },

      year: {}
    },

    data() {
      return {
        checkedOrg: this.chartData.dataSource[0]
      }
    },

    mounted() {
      this.$nextTick(() => {
        let dom = this.$refs.chartBar;
        this.chart = echarts.init(dom);
        this.initChart();

        // 监听 window 窗口变化，自适应图表
        window.addEventListener('resize', this.resizeChart);
      });
    },

    methods: {

      /* 图表大小自适应 */
      resizeChart() { this.chart && this.chart.resize(); },

      /* 渲染图表 */
      initChart() {
        let option = this.getOptions();
        this.chart.showLoading();

        // 延迟渲染，因为数据瞬间渲染完成，用户可能以为数据没变化
        setTimeout(() => {
          this.chart.setOption(option);
          this.chart.hideLoading();
        }, 400);
      },

      /* 部门切换 */
      changeOrg(e) {
        let val = e.target.value;
        let arr = this.chartData.dataSource;
        this.checkedOrg = arr.find((item) => { return (item.radio_id === val); });

        this.initChart();
      },

      /* 返回图表渲染参数 */
      getOptions() {
        let options = barOptions('score');
        let rowDataSource = this.getRowDataSource();

        let xAxisData = [], seriesData = [];
        for (let i = 1; i <= 12; i++) {
          let mId = 'm' + ((i < 10) ? ('0' + i) : i);

          xAxisData.push(this.year.text + i + '月');
          seriesData.push(rowDataSource[mId]);
        }

        options.xAxis[0].data = xAxisData;
        options.series[0].data = seriesData;

        return options;
      },

      /* 返回当前选中的信息 */
      getRowDataSource(key) {
        let dataSource = this.chartData.dataSource;
        let index = dataSource.findIndex(item => item.radio_id === this.checkedOrg.radio_id);

        if (key === 'recentMonths') { return dataSource[index][key]; }
        return dataSource[index];
      }

    }
  }
</script>



<style lang="less" scoped>
  .chart-box {
    padding: 5px;

    .radio-box, .radio-org { margin-bottom: 10px; }

    .chart-view {
      .score-contrast {
        margin: 5px 0 10px 0;
        overflow: hidden;

        .score-box {
          float: left;
          padding: 4px 10px;
          margin-right: 10px;
          border: 1px solid #e7e7e7;
          background-color: #fafafa;
          border-radius: 3px;

          .title {
            font-size: 12px;
            color: #666666;
          }

          .value {
            font-weight: bold;
          }
        }
      }

      .chart-bar {
        background: #fafafa;
        width: 100%;
        height: 300px;
        position: relative;
      }
    }
  }
</style>
